<template>
  <div id="pie_chart" class="pie-chart-panel" :style="style" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'PieChart',
  components: {},
  props: {
    style: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      chart: null,
      pie_data: [
        { name: '月活跃用户数', value: 409 },
        { name: '启用用户数据', value: 1049 }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initChartEvent()
  },
  methods: {
    initChartEvent() {
      if (!this.chart) {
        const chartDom = document.getElementById('pie_chart')
        if (!chartDom) return
        this.chart = echarts.init(chartDom)
        this.initChart()
      }
      window.addEventListener('beforeunload', this.clearChart)
    },

    initChart() {
      this.chart.setOption({
        title: [{
          left: 'center',
          text: '月活跃度 38.99%',
          textStyle: {
            color: '#bb3b3b'
          }
        }],
        series: {
          type: 'pie',
          radius: [40, 60],
          left: 'right',
          width: 480,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          },
          label: {
            alignTo: 'edge',
            formatter: '{name|{b}}\n{time|{c}}',
            minMargin: 5,
            edgeDistance: 10,
            lineHeight: 15,
            rich: {
              time: {
                fontSize: 10,
                color: '#999'
              }
            }
          },
          labelLine: {
            length: 15,
            length2: 0,
            maxSurfaceAngle: 80
          },
          labelLayout: function(params) {
            var isLeft = params.labelRect.x < this.chart.getWidth() / 2
            var points = params.labelLinePoints
            // Update the end point.
            points[2][0] = isLeft
              ? params.labelRect.x
              : params.labelRect.x + params.labelRect.width

            return {
              labelLinePoints: points
            }
          },
          data: this.pie_data
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
  .pie-chart-panel {
    width: 100%;
    height: 210px;
    /*position: fixed;*/
    /*top: 280px;*/
    z-index: 9;
    color: #fff;
    background-color: rgba(0,0,0,.2);
    padding:10px 15px;
    margin-bottom: 10px;
  }
</style>
